<template>
  <div
    class="ky-container schedule-container"
    :style="{height: qktVisible?'calc(100vh - 250px)': 'calc(100vh - 50px)'}"
    @click="scheduleDlgClose"
  >
    <el-card shadow="hover" class="relative ky-card-xs ky-card-hdbg">
      <el-row>
        <el-col :span="24">
          <el-form
            :model="formdata"
            @submit.native.prevent
            class="ky-form-inline ky-form-inline-sm">
            <el-form-item>
              <roomCascader :room.sync="formdata.room" :refresh-local="true" @roomChange="roomChange"></roomCascader>
            </el-form-item>
            <!-- <el-form-item v-if="formdata.room.length>0">
              <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
                <i @click="refreshTemplate" class="el-icon-refresh" style="margin-top: 12px;cursor:pointer;"></i>
              </el-tooltip>
            </el-form-item> -->
          </el-form>
        </el-col>
        <!-- <el-button size="small" @click="viewChange">机房下拉</el-button> -->
        <!-- <el-col :span="24">
          <div style="text-align: right;line-height: 46px;">
            <el-button size="small" v-permission="'YJYY10001001002'" @click="viewChange">机房号源模板设置</el-button>
            <autoPublishStatus ref="autoPublishStatus" @autoChange="refreshTemplate"></autoPublishStatus>
          </div>
        </el-col> -->
      </el-row>
      <div class="r_tools" style="text-align: right;line-height: 46px;">
        <el-checkbox v-model="roomIsUseSelectOption" @change="changeRoomSelect">
          机房下拉
        </el-checkbox>
        <span v-if="formdata.room.length>0" class="mar-r-10 mar-l-10">
          <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
            <i @click="refreshTemplate" class="el-icon-refresh" style="margin-top: 12px;cursor:pointer;"></i>
          </el-tooltip>
        </span>
        <el-button v-show="!toolsflag" size="small" v-permission="'YJYY10001001002'" @click="viewChange">机房号源模板设置</el-button>
        <autoPublishStatus :mini="toolsflag" ref="autoPublishStatus" @autoChange="refreshTemplate" style="margin: 0 5px;"></autoPublishStatus>
        <i
          style="margin-right: 4px;"
          :class="!toolsflag ? 'el-icon-d-arrow-right' : 'el-icon-c-scale-to-original'"
          @click="toolsflag = !toolsflag"
        ></i>
      </div>
    </el-card>
    <el-card shadow="hover" class="ky-card-xs ky-card-hdbg ky-mt10" v-show="formdata.room.length>0">
      <scheduleView ref="scheduleView" @updateTemplateSuccesss="updateTemplateSuccesss"></scheduleView>
    </el-card>
    <roomNone v-show="formdata.room.length===0"></roomNone>
    <quicktemplate
      v-permission="'YJYY10001001002'"
      ref="quicktemplate"
      :qt-show.sync="qktVisible"
      :checked-room="formdata.room"
      @quickTempChange="quickTempChange"
    ></quicktemplate>
  </div>
</template>

<script>
import { setLocalStorage, getLocalStorage } from '@/utils/localStorage'
import { isNull } from '@/utils/utils' // this.$utils
import { mapGetters } from 'vuex'
import roomNone from '@/components/roomNone'
import quicktemplate from '../components/quickTemplate'
import roomCascader from '../components/roomCascader'
import autoPublishStatus from '../components/autoPublishStatus'
import scheduleView from './scheduleView'

export default {
  components: { roomCascader, scheduleView, quicktemplate, autoPublishStatus, roomNone },
  provide() {
    return {
      tempListUpdate: this.tempListUpdate
    }
  },
  data() {
    return {
      toolsflag: false,
      checkRoomZZ: [],
      formdata: {
        room: []
      },
      // 快捷选择模板
      quickTempObj: null,
      qktVisible: false,
      roomIsUseSelectOption: false
    }
  },
  computed: {
    ...mapGetters(['device']),
    appConfig() {
      return this.$store.state.settings.appConfig
    }
  },
  watch: {
    device: {
      handler(val) {
        this.toolsflag = val === 'mobile'
      },
      immediate: true
    }
  },
  created() {
    this.roomIsUseSelectOption = this.roomIsUseSelectOptionFun()
    // this.formdata.room = this.$store.state.user.checkRoom
  },
  mounted() {
    console.log('welcome')
    // this.roomChange(this.formdata.room)
    // this.$refs.quicktemplate.checkRoomInit(this.formdata.room)
  },
  methods: {
    changeRoomSelect(e) {
      // console.log('changeRoomSelect', e)
      setLocalStorage('yjyy-roomIsUseSelect', e ? 1 : 0)
      this.$store.dispatch('settings/set_roomIsUseSelectOption', this.roomIsUseSelectOptionFun())
    },
    roomIsUseSelectOptionFun() {
      let resultValue = false
      let yjyyIsSelect = getLocalStorage('yjyy-roomIsUseSelect')
      if (!isNull(yjyyIsSelect)) {
        if (getLocalStorage('yjyy-roomIsUseSelect') == 1) {
          resultValue = true
        } else {
          resultValue = false
        }
      } else {
        resultValue = this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.roomIsUseSelectOption
        setLocalStorage('yjyy-roomIsUseSelect', resultValue ? 1 : 0)
        this.$store.dispatch('settings/set_roomIsUseSelectOption', resultValue)
      }
      return resultValue
    },
    // 机房改变
    roomChange(roomData) {
      // console.log('roomData=>roomData', roomData)
      // console.log('roomData=>this.formdata.room', this.formdata.room)
      if (roomData) {
        this.$refs.autoPublishStatus.init(roomData)
      }
      this.qktVisible = false
      this.$refs.scheduleView.init(this.formdata.room)
      this.$store.dispatch('user/getDefaultCheckRoom', roomData)
    },
    viewChange() {
      // 号源管理与模板管理的切换走这里
      console.log('viewChange===')
      // this.$store.dispatch('setting/tigger_isShowEditScedule', false)
      this.$router.push({ path: '/appointmaintain/template' })
    },
    // 刷新
    refreshTemplate() {
      this.$refs.scheduleView.refresh()
    },
    // 快捷模板选择监听
    quickTempChange(quickTempObj) {
      this.quickTempObj = quickTempObj ? { ...quickTempObj } : null

      this.$refs.scheduleView.quickTempChange(this.quickTempObj)
    },
    // 视图更新模板
    updateTemplateSuccesss() {
      // console.log('更新模板提交成功！')
    },
    tempListUpdate() {
      this.$refs.quicktemplate && this.$refs.quicktemplate.getTempList()
    },
    // 关闭弹框
    scheduleDlgClose() {
      this.$refs.scheduleView && this.$refs.scheduleView.dlgClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.schedule-container{
  height: calc(100vh - 50px);
  overflow-y: auto;
}
.releaseauto{
  margin:0 20px;
  cursor: pointer;
  font-size: 14px;
  .dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #EB5353;
  }
  .isauto{
    background-color: rgb(67, 207, 32);
  }
}
.r_tools{
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px;
  background-color: #fff;
  border-radius: 4px;
}
</style>
